<template>
  <el-dialog v-bind="dialog" :visible.sync="dialog.visible" @close="close">
    <div v-show="dialog.step === 'step-unbind'">
      <el-form ref="unbindPhoneForm" :model="unbindPhoneForm" :rules="formRules" label-position="top">
        <el-form-item> 请输入 {{ hideCharacter(userInfo.phone, 'phone') }} 收到的手机验证码 </el-form-item>
        <el-form-item prop="code" label="验证码">
          <div class="flex">
            <el-input v-model="unbindPhoneForm.code" maxlength="6" size="medium" type="text" name="code" placeholder="获取验证码" />
            <SendCode ref="sendUnbindcode" @run="sendUnbindCode" />
          </div>
        </el-form-item>
        <el-form-item align="right">
          <el-button type="primary" size="mini" @click="next">下一步</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div v-show="dialog.step === 'step-bind'">
      <el-form ref="bindPhoneForm" :model="bindPhoneForm" :rules="formRules" label-position="top">
        <el-form-item prop="phone" label="手机号">
          <el-input v-model="bindPhoneForm.phone" size="medium" placeholder="需要绑定的手机号" name="phone" type="text" />
        </el-form-item>
        <el-form-item prop="code" label="验证码">
          <div class="flex">
            <el-input v-model="bindPhoneForm.code" size="medium" maxlength="6" type="text" name="code" placeholder="短信验证码" />
            <SendCode ref="sendBindcode" @run="sendBindCode" />
          </div>
        </el-form-item>
        <el-form-item align="right">
          <el-button type="primary" size="mini" @click="bind">绑 定</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import { hideCharacter } from '@/utils'
import { validatePhone } from '@/utils/validate.js'
import SendCode from '@/components/SendCode'
import { ucApi } from '@/api/api.js'

export default {
  components: {
    SendCode
  },
  data() {
    return {
      // 解绑
      unbindPhoneForm: {
        code: ''
      },
      // 绑定
      bindPhoneForm: {
        phone: '',
        code: ''
      },
      dialog: {
        visible: false,
        step: 'step-bind',
        closeOnPressEscape: false,
        closeOnClickModal: false
      },
      formRules: {
        phone: [
          { required: true, trigger: 'blur', message: '请输入手机号' },
          { trigger: 'blur', validator: validatePhone }
        ],
        code: [{ required: true, trigger: 'blur', message: '请输入手机验证码' }]
      }
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    hideCharacter() {
      return (value, type) => {
        return hideCharacter(value, type)
      }
    }
  },
  methods: {
    // 发送解绑验证码
    sendUnbindCode() {
      this.$request(ucApi.sendPhoneCode, { phone: this.userInfo.phone, type: 1 }).then(() => {
        this.$refs.sendUnbindcode.start()
        this.$notify({
          title: '成功',
          message: '验证码已发送，请及时查收',
          type: 'success'
        })
      })
    },
    // 下一步
    next() {
      this.$refs.unbindPhoneForm.validate(async (valid) => {
        if (valid) {
          try {
            const phone = this.userInfo.phone
            const { code } = this.unbindPhoneForm
            await this.$request(ucApi.checkPhoneCode, { phone, code, type: 1 })
            this.$message({
              title: '提示',
              message: '验证成功',
              type: 'success'
            })
            this.dialog.step = 'step-bind'
          } catch (error) {
            console.log(error)
          }
        }
      })
    },
    // 发送绑定验证码
    sendBindCode() {
      this.$refs['bindPhoneForm'].validateField('phone', (valid) => {
        if (!valid) {
          this.$request(ucApi.sendBindPhoneCode, { phone: this.bindPhoneForm.phone }).then(() => {
            this.$refs.sendBindcode.start()
            this.$notify({
              title: '成功',
              message: '验证码已发送，请及时查收',
              type: 'success'
            })
          })
        } else {
          return false
        }
      })
    },
    // 绑定
    bind() {
      this.$refs.bindPhoneForm.validate(async (valid) => {
        if (valid) {
          if (valid) {
            this.loading = true
            this.$request(ucApi.bindPhone, { ...this.bindPhoneForm })
              .then((res) => {
                this.loading = false
                if (res.code === 1) {
                  this.$message({
                    message: '绑定成功',
                    type: 'success'
                  })
                  this.$store.dispatch('user/getInfo')
                  this.dialog.visible = false
                }
              })
              .catch(() => {
                this.loading = false
              })
          } else {
            return false
          }
        }
      })
    },
    close() {
      this.$refs['unbindPhoneForm'].resetFields()
      this.$refs['bindPhoneForm'].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.el-dialog__wrapper ::v-deep.el-dialog {
  max-width: 364px;
}
</style>
